<script setup name="AsFilePreviewBtn">
  /*
  <AsFilePreviewBtn :urls="urls" @delete="handelDelete" />
    const urls ='https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg,http://static.shanhuxueyuan.com/test.pdf,http://static.shanhuxueyuan.com/test6.docx,http://static.shanhuxueyuan.com/demo/excel.xlsx,https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa6'

  const urls = [
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'http://static.shanhuxueyuan.com/test.pdf',
    'http://static.shanhuxueyuan.com/test6.docx',
    'http://static.shanhuxueyuan.com/demo/excel.xlsx',
  ]
 */
  const baseApi = import.meta.env.VITE_APP_BASE_API
  const props = defineProps({
    urls: {
      type: [String, Array],
      default: '',
    },
    title: {
      type: String,
      default: 'Files List',
    },
    width: {
      type: [Number, String],
      default: 300,
    },
    trigger: {
      type: String,
      default: 'hover',
      validator: (val) => {
        return ['click', 'focus', 'hover', 'contextmenu'].includes(val)
      },
    },
    // 是否前端下载
    isWebDownload: {
      type: Boolean,
      default: true,
    },
    isDownload: {
      type: Boolean,
      default: true,
    },
    isDelete: {
      type: Boolean,
      default: true,
    },
    placement: {
      type: String,
      default: 'right',
      validator: (val) => {
        return [
          'top',
          'top-start',
          'top-end',
          'bottom',
          'bottom-start',
          'bottom-end',
          'left',
          'left-start',
          'left-end',
          'right',
          'right-start',
          'right-end',
        ].includes(val)
      },
    },
  })
  const emit = defineEmits(['view', 'download', 'delete'])
  const asFilePreviewRef = ref()

  const urlsList = computed(() => {
    if (Array.isArray(props.urls)) {
      return props.urls
    } else {
      return props.urls?.split(',')
    }
  })

  const urlIndex = ref(0)

  const getFileName = (url) => {
    const fileName = url?.split('/')?.pop()
    return fileName?.replace(/_.*?\./, '.') || url
  }

  const isJointProxy = (url) => {
    const result = /^(http|https):\/\//.test(url)
    return result ? url : baseApi + url
  }

  const handelView = ({ index }) => {
    urlIndex.value = index
    asFilePreviewRef.value.open()
  }
  const handelDownload = ({ url, index }) => {
    if (props.isWebDownload) {
      const link = document.createElement('a')
      link.href = isJointProxy(url)
      link.download = getFileName(url)
      link.click()
      link.remove()
    } else {
      emit('download', { url, index })
    }
  }
  const handelDelete = ({ url, index }) => {
    emit('delete', { url, index })
  }
</script>

<template>
  <div class="asFilePreviewBtn">
    <template v-if="urlsList.length === 0">
      <slot name="empty"> </slot>
    </template>
    <el-popover v-else v-bind="$attrs" :placement="placement" :width="width" :trigger="trigger" :title="title">
      <template #reference>
        <slot>
          <el-button type="primary" size="small">{{ title }}</el-button>
        </slot>
      </template>
      <div class="asFilePreview-item" v-for="(url, index) in urlsList" :key="index">
        <div class="file-name">{{ getFileName(url) }}</div>
        <div class="option-btn">
          <el-icon @click="handelView({ url, index })"><View /></el-icon>
          <el-icon v-if="isDownload" @click="handelDownload({ url, index })"><Download /></el-icon>
          <el-icon class="del" v-if="isDelete" @click="handelDelete({ url, index })"><Delete /></el-icon>
        </div>
      </div>
    </el-popover>
    <AsFilePreview ref="asFilePreviewRef" :urls="urls" :urlIndex="urlIndex" />
  </div>
</template>

<style lang="scss" scoped>
  .asFilePreviewBtn {
  }
  .asFilePreview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.8;
    padding: 0 6px;
    .file-name {
      box-sizing: border-box;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      cursor: default;
    }
    .option-btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
      margin-left: auto;
      .el-icon {
        margin-left: 10px;
      }
      .el-icon {
        color: #409eff;
      }
      .el-icon.del {
        color: #f56c6c;
      }
    }
  }
  .asFilePreview-item:hover {
    background-color: #f5f7fa;
  }
</style>
